<template>
  <div id="orderListDetailItem">
    <div class="header">
      <label class="orderNum">订单号:{{ order.orderNo }}</label>
      <label :class="{orderState:true,grayState:showGrayState}">{{ statusStr }}</label>
    </div>
    <div class="center" @click="clickDetailItem">
      <!--<div class="centerDiv1">-->
        <!--<van-icon :name="weixiu" class="icon" />-->
        <!--<label class="message big">{{ order.orderName }}</label>-->
      <!--</div>-->
      <div class="centerDiv2">
        <van-icon :name="didian" class="icon" size="0.8rem" />
        <label class="message">{{order.repairArea}}{{ order.address }}</label>
      </div>
      <div class="centerDiv3">
        <div class="centerDiv3">
          <van-icon :name="date" class="icon" size="0.8rem" />
          <label class="message">{{ order.createAt }}</label>
        </div>
        <div class="totalSum" v-show="order.price > 0">合计:¥{{ order.price }}</div>
      </div>
    </div>
    <div class="bottom">
      <van-button
        type="default"
        class="button"
        @click="pay"
        v-show="showPayButton"
        >确认支付</van-button
      >

      <van-button
              type="default"
              class="button"
              @click="confirmReceipt"
              v-show="showConfirmReceiptButton"
      >确认收款</van-button
      >

      <van-button
        type="default"
        class="button grayButton"
        @click="cancel"
        v-show="showCancelOrderButton"
        >取消订单</van-button
      >

      <van-button
              type="default"
              class="button blueButton"
              @click="complete"
              v-show="showCompleteButton"
              color="#397BE6"
      >维修完成</van-button>

      <van-button
              type="default"
              class="button grayButton"
              @click="masterCancelOrderButton"
              v-show="showMasterCancelOrderButton"
      >作废订单</van-button>

      <van-button
              type="default"
              class="button grayButton"
              @click="callUserButtonClick"
              v-show="showCallUserButton"
      >联系他</van-button>
      
      <van-button
        type="default"
        class="button"
        @click="comment"
        v-show="showCommentButton"
        >去评价</van-button
      >

      <van-button
        type="default"
        class="button"
        @click="dispatchOrder"
        v-show="showDispatchOrderButton"
        >分配订单</van-button
      >

      <van-action-sheet
              v-model="showActionSheet"
              :actions="actions"
              cancel-text="取消"
              @select="onSelect"
              @cancel="onCancel"
      />

      <RatePopup
              v-bind:showRatePopup="showRatePopup"
              :closeRatePopup="closeRatePopupView"
              :submitSuccess="submitRateSuccess"
              :orderid="order.id"
      ></RatePopup>

    </div>
  </div>
</template>

<script>
import { getOrderStatusStr,actionWithLink } from "@/utils/utils";
import { Dialog, Toast } from "vant";
import {api_orderConfirm} from "@/service/api/repair"
import RatePopup from "@/views/order/components/OrderDetail/components/RatePopup";

export default {
  name: "OrderListDetailItem",
    components:{
        RatePopup
    },
  data() {
    return {
      weixiu: require("@/images/icon/order/weixiu_gray.png"),
      date: require("@/images/icon/order/date_gray.png"),
      didian: require("@/images/icon/order/didian_gray.png"),
        showRatePopup: false,
        showActionSheet: false,
        actions: [{ name: "线下支付" },{ name: "在线支付" ,disabled: true}],

    };
  },
  methods: {
      submitRateSuccess(){
          this.listReloadData();
      },
      closeRatePopupView() {
          this.showRatePopup = false;
      },
      //维修师傅确认收款
      confirmReceipt() {
          // 确认收款  api_orderConfirm

          Dialog.confirm({
              title: "温馨提示",
              message:"请确认用户是否线下支付？"
          }).then(() => {
              this.requestConfirmReceipt();
              }).catch(() => {
              });
      },
      requestConfirmReceipt(){
          api_orderConfirm(this.order.id).then((res)=>{
              this.listReloadData();

              this.$router.push({
                  name:"resultPage",
                  query: {
                      title: "确认收款成功",
                      subTitle1:"",
                      subTitle2:""
                  }
              });

              // Dialog.alert({
              //     message: '确认收款成功'
              // }).then(() => {
              // });

          }).catch((error)=>{
              this.$toast(error.message);
          });
      },
      onSelect(item) {
          // 点击选项时默认不会关闭菜单，可以手动关闭
          this.showActionSheet = false;

          if (item.name == "线下支付") {
              Dialog.confirm({
                  title: "温馨提示",
                  message:
                      "订单支付方式提交成功，请提醒维修师傅已线下支付，确认订单完成。",
                  showCancelButton: false,
                  confirmButtonText: "确定",
                  messageAlign: "left"
              })
                  .then(() => {})
                  .catch(() => {});
          } else {
              // Toast(item.name + 'id = ' + this.order.id + '价格 = ' + this.order.orderPrice);
              Toast('在线支付暂未开通');
          }
      },
    pay() {
        this.showActionSheet = true;
    },
    masterCancelOrderButton() {

        this.$router.push({
            name: "cancelOrderPage",
            query: {
                orderid: this.order.id,
                isMaster:this.isMaster
            }
        });

    },
    cancel() {
        this.$router.push({
            name: "cancelOrderPage",
            query: {
                orderid: this.order.id,
                isMaster:this.isMaster
            }
        });
    },
      callUserButtonClick(){
          actionWithLink('tel://' + this.order.mobile);
      },
    comment() {
        this.showRatePopup = true;

    },
    clickDetailItem() {
      this.goToDetailPage();
    },
    dispatchOrder() {
      this.$router.push({
        name: "distributionOrder",
        query: {
          orderid: this.order.id,

        }
      });
    },
    goToDetailPage() {
      this.$router.push({
        name: "orderDetailPage",
        query: {
          isMaster: this.isMaster,
          orderid: this.order.id,
          isDispatchOrder:this.isDispatchOrder
        }
      });
    },
      complete() {
          this.$router.push({
              name:'masterEditRepair',query:{
                  orderId: this.order.id
              }
          });
      },
  },
  props: {
    isMaster: String,
    order: Object,
    isDispatchOrder: String,
      listReloadData:Function
  },
  computed: {
      showGrayState(){
          if (this.order.status === 5 || this.order.status === 6){
              return true;
          }
          return false;
      },
    statusStr() {
        if (this.isDispatchOrder == 'true') {

            if (this.order.status !== 1){
                return '已派单';
            }
            return '待派单';
        }else {
            return getOrderStatusStr(this.isMaster, this.order.status);
        }

    },
    // 是否显示用户支付按钮
    showPayButton() {
      if (this.order.status === 3 && this.isMaster !== 'true') {
        return true;
      } else {
        return false;
      }
    },
    // 是否显示用户取消订单按钮 comment
    showCancelOrderButton() {
      if ((this.order.status === 1) && this.isMaster !== 'true') {
        return true;
      } else {
        return false;
      }
    },
    // 是否显示用户评论按钮
    showCommentButton() {
      if (this.order.status === 4 && this.isMaster !== 'true') {
        return true;
      } else {
        return false;
      }
    },
    showDispatchOrderButton() {
      if (this.isDispatchOrder === 'true' && this.order.status === 1) {
        return true;
      }
      return false;
    },
      // 维修师傅是否显示作废订单按钮
      showMasterCancelOrderButton() {
          if (this.isDispatchOrder === 'true'){
              return false;
          }

          if (
              (this.order.status === 2) &&
              this.isMaster === "true"
          ) {
              return true;
          }
          return false;
      },
      // 是否显示联系用户按钮
      showCallUserButton(){
          if (this.isDispatchOrder === 'true'){
              return false;
          }
          
          if (this.order.mobile) {

              if (this.isMaster === "true" && this.order.status === 2) {
                  return true;
              }else {
                  return false;
              }
          }else {
              return false;
          }
      },
      // 维修师傅 是否显示完成按钮  在处理中的状态时候 才显示完成
      showCompleteButton() {
        // 不显示维修完成
          return false;

          if (this.isDispatchOrder === 'true'){
              return false;
          }

          if (this.order.status === 2 && this.isMaster === "true") {
              return true;
          }
          return false;
      },
      // 是否显示维修师傅确认收款按钮
      showConfirmReceiptButton(){
          if (this.isDispatchOrder === 'true'){
              return false;
          }

          if (this.order.status === 3 && this.isMaster === "true") {
              return true;
          }
          return false;
      }
  }
};
</script>

<style scoped>
#orderListDetailItem {
  margin-top: 1.0rem;
  margin-left: 1.3333333333333333rem;
  margin-right: 1.3333333333333333rem;
  border-radius: 0.26666666666666666rem;
  background-color: white;
}

.header {
  position: relative;
  display: block;
  height: 2.4rem;
}
.orderNum {
  margin-left: 1rem;
  height: 3.1rem;
  font-size: 0.8666666666666667rem;
  font-family: "PingFangSC-Medium";
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 3.1rem;
}
.orderState {
  position: absolute;
  right: 1rem;
  height: 3.1rem;
  line-height: 3.1rem;
  font-size: 0.8666666666666667rem;
  font-family: "PingFangSC-Medium";
  color: rgba(242, 62, 84, 1);
}
.grayState{
  color: #7A8491;

}

.center {
  /*position: relative;*/
  /*display: flex;*/
  /*flex-direction: row;*/
  width: 100%;
  /*height: 4.266666666666667rem;*/
}
.centerDiv1 {
  display: flex;
  height: 1.3333333333333333rem;
  align-items: center;
}
.centerDiv2 {
  margin-top: 0.3333333333333333rem;
  display: flex;
  align-items: center;
  justify-content: start;
}
.centerDiv3 {
  position: relative;
  margin-top: 0.06666666666666667rem;
  display: flex;
  height: 1.2rem;
  align-items: center;
}
.icon {
  margin-left: 1rem;
}

.message {
  font-family: "PingFangSC-Regular";
  color: rgba(122, 132, 145, 1);
  font-size: 0.8333333333333334rem;
  margin-left: 0.43333333333333335rem;
  margin-right: 1rem;
}

.big {
  font-size: 0.9333333333333333rem;
}
.totalSum {
  position: absolute;
  right: 1rem;

  font-size: 0.9333333333333333rem;
  font-family: "PingFangSC-Medium";
  color: rgba(18, 28, 50, 1);
}
.bottom {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;

  padding: 0.75rem 0;

  /*height: 3.6333333333333333rem;*/
}
.button {
  height: 2.1333333333333333rem;
  line-height: 2.1333333333333333rem;
  margin-right: 1rem;
  color: #f23e54;
  font-family: "PingFangSC-Medium";
  border-radius: 0.2rem;
}
.grayButton {
  color: #bfc3cd;
}
.blueButton {
  color: white;
}
</style>
